曲線

曲線有以下幾種方法

quadraticCurveTo

quadraticCurveTo 是 Canvas 2D API 新增二次貝塞爾曲線路徑的。它需要一個點。第一個點是控制，第二個點是方法點。看起來點是當前路徑的最新點，當創建二次貝賽爾曲線之前，可以使用使用 moveTo()方法進行改變。

bezierCurveTo

bezierCurveTo 是Canvas 2D API 繪製第三貝賽茲路線的方法。該方法需要三個點。第一、第二點，第三個點是結束點。繪製貝賽爾沿前，可以通過調用 moveTo()進行修改

還記得嗎？ bezierCurveTo 就是我們上一篇章拿來繪製橢圓的方法，但在這裡繪製曲線會過於複雜。

實作

這次我們使用 quadraticCurveTo ，單純是因為使用上比較直覺簡單！來看看程式碼吧

case "curve": // 曲線
  clearCanvas();
  restore();
  //curve toward mouse
  ctx.beginPath();
  ctx.moveTo(secondPoint?.x, secondPoint?.y);
  ctx.quadraticCurveTo(
    point?.x,
    point?.y,
    initialPoint?.x,
    initialPoint?.y
  );
  ctx.stroke();
  break;

  /**
   * 滑鼠點下畫布
   */
  const handleMouseDown = (event: any) => {
    setIsDrawing(true);
    const point = getClientOffset(event);
    setInitialPoint({ ...point });
    switch (tool) {
    ...
      case "curve":
        saveCanvas();
        break;
      default:
        break;
    }
  };

  /**
   * 提起畫筆
   */
  const handleMouseUp = (event: any) => {
    if (isDrawing) {
      setIsDrawing(false);
      setInitialPoint(null);
      lastPoint = null;
      switch (tool) {
        case "curve":
          const point = getClientOffset(event);
          setSecondPoint(point);
          break;
        default:
          break;
      }
    }
  };

完成！